<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <link rel="icon" href="./favicon.ico"/>
  <title>关于我们</title>
  <link rel="stylesheet" href="./libs/uikit/css/uikit.min.css">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_938989_wfn8mzlz6t.css">
  <link rel="stylesheet" href="./css/animate.css">
  <link rel="stylesheet" href="css/reset.css"/>
  <link rel="stylesheet" href="css/head.css"/>
  <link rel="stylesheet" href="./libs/swiper/css/swiper.min.css"/>
  <link rel="stylesheet" href="css/style.css"/>

</head>
<body>
<div id="app">
  <!-- 导航菜单 -->
  <div class="headers">
    <header class="header">
      <div class="clearfix">
        <div class="fl left">
          <a href="javascript:void(0)"><img src="image/logo.png" alt="" class="img1"/></a>
        </div>
        <div class="fr nav">
          <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
            <li><a href="./index.html">首页</a></li>
            <li class="dropdown">
              <a href="./solution.html">解决方案 <span class="iconfont icon-bottom"></span></a>
              <div class="dropdown_menu">
                <a href="./solution-shop.html">分销商城</a>
                <a href="./solution-zxj.html">租享家管理</a>
              </div>
            </li>
            <li><a href="./examples.html">应用案例</a></li>
            <li><a href="./orders.html">定制服务</a></li>
            <li><a href="./about.html" class="active">关于我们</a></li>
          </ul>
        </div>
        <a href="javascript:void(0)" id="navToggle">
          <span></span>
        </a>
      </div>
    </header>
    <div class="m_nav">
      <div class="top clearfix">
        <img src="image/closed.png" alt="" class="closed"/>
      </div>
      <div class="logo">
        <img src="image/logo2.png" alt=""/>
      </div>
      <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
        <li><a href="./index.html">首页</a></li>
        <li class="dropdown">
          <a href="javascript:void(0)">解决方案 <span class="iconfont icon-bottom fr"></span> </a>
          <div class="dropdown_menu">
            <a href="./solution.html">方案预览</a>
            <a href="./solution-shop.html">分销商城</a>
            <a href="./solution-zxj.html">租享家管理</a>
          </div>
        </li>
        <li><a href="./examples.html">应用案例</a></li>
        <li><a href="./orders.html">定制服务</a></li>
        <li><a href="./about.html" class="active">关于我们</a></li>
      </ul>
    </div>
  </div>

  <!-- 轮播图 -->
  <div class="banner-2">
    <!--<img src="./image/about_banner.png" alt="九鸟banner">-->
  </div>
  <div class="about-desc">
    <div class="uk-container about-desc-container">
      <p class="about-desc-title">公司简介</p>
      <p class="about-desc-info">上海九鸟软件科技有限公司擅长创意设计、互联网应用与各类业务系统深度整合，以及大型项目的执行与管理，致力于为企业深度定制跨平台、多终端、全链条的互联网解决方案。</p>
      <p class="about-desc-info">九鸟科技秉承"专业团队、品质服务"
        的经营理念，诚信务实的服务了近万家客户，成为众多集团、上市公司的长期合作伙伴。我们愿意用十几年的行业经验与领先的互联网应用技术，帮助客户实践企业互联网品牌营销和协同管理战略，为更多企业提供互联网应用服务 !</p>
    </div>
  </div>

  <!-- 我们的优势 -->
  <div class="item-padding advantage wow fadeInUp">
    <div class="uk-container">
      <div class="index-comm-title">
        <p class="title-en">OUR ADVANTAGE</p>
        <p class="title-zh">我们的优势</p>
        <p class="divider"></p>
      </div>
      <div class="uk-grid advantage-container">
        <div class="uk-width-1-2@m advantage-pic">
          <img src="./image/advantage_pic.png" alt="">
        </div>
        <div class="uk-width-1-2@m advantage-list">
          <ul>
            <li class="advantage-item">
              <h1 class="item-title"><span class="iconfont icon-gou"></span>10年建站经验</h1>
              <p class="item-desc">丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。</p>
            </li>
            <li class="advantage-item">
              <h1 class="item-title"><span class="iconfont icon-gou"></span>300+客户选择</h1>
              <p class="item-desc"> 300+客户选择与我们合作，告诉您选择我们是一个正确的选择。</p>
            </li>
            <li class="advantage-item">
              <h1 class="item-title"><span class="iconfont icon-gou"></span>24小时售后支持</h1>
              <p class="item-desc">提供24小时售后支持，为您保驾护航，不用担心出现问题无法解决。</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- 发展历程 -->
  <div class="item-padding dev-his wow fadeInUp">
    <div class="uk-container">
      <div class="index-comm-title">
        <p class="title-en">发展历程</p>
        <p class="title-zh">development history</p>
        <p class="divider"></p>
      </div>
      <div class="uk-grid uk-grid-small uk-grid-small dev-container">
        <div class="uk-width-3-5@m dev-left">
          <div class="uk-grid uk-child-width-1-4">
            <div class="dev-left-item" v-for="(item,index) in devList" :key="index"
                 :class="item.active==1?'item-active':''" @mouseover="devOver(index)">
              <p class="item-date">{{item.time}}</p>
              <p class="item-name">{{item.title}}</p>
            </div>
          </div>
        </div>
        <div class="uk-width-2-5@m dev-right">
          <div class="right-container">
            <div class="item-title">
              <p class="title-zh">{{devData.title}}</p>
              <p class="title-en">{{devData.titleEn}}</p>
            </div>
            <ul class="dev-list">
              <li class="dev-item">
                <p class="item-date" v-html="devData.desc"></p>
              </li>
            </ul>
            <!--<div class="about-arrows">-->
              <!--<span @click="changeItem(0)" class="iconfont icon-jiantou3"></span>-->
              <!--<span @click="changeItem(1)" class="iconfont icon-jiantou1"></span>-->
            <!--</div>-->
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 人员介绍 -->
  <div class="item-padding persons wow fadeInUp">
    <div class="uk-container">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <p class="persons-desc">
              丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。</p>
            <div class="img-nickname">
              <img class="img" src="http://img1.imgtn.bdimg.com/it/u=3283582634,1073460969&fm=26&gp=0.jpg" alt="">
              <span class="img-divider"></span>
              <span class="nickname">项目经历</span>
            </div>
          </div>
          <div class="swiper-slide">
            <p class="persons-desc">
              丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。</p>
            <div class="img-nickname">
              <img class="img" src="http://img1.imgtn.bdimg.com/it/u=3283582634,1073460969&fm=26&gp=0.jpg" alt="">
              <span class="img-divider"></span>
              <span class="nickname">项目经历</span>
            </div>
          </div>
          <div class="swiper-slide">
            <p class="persons-desc">
              丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。丰富的网站建设经验，一对一网页设计及售后对接，为您的网站创造商业价值。</p>
            <div class="img-nickname">
              <img class="img" src="http://img1.imgtn.bdimg.com/it/u=3283582634,1073460969&fm=26&gp=0.jpg" alt="">
              <span class="img-divider"></span>
              <span class="nickname">项目经历</span>
            </div>
          </div>
        </div>

        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>

  <!--尾部-->
  <div class="footer wow fadeInUp">
    <div class="uk-container">
      <div class="uk-grid">
        <div class="uk-width-1-3@m">
          <h1 class="footer-name">上海九鸟软件有限公司</h1>
          <p class="footer-contact-item"><span class="iconfont icon-weibiaoti-"></span>电话：18862486210</p>
          <p class="footer-contact-item"><span class="iconfont icon-youxiang-"></span>地址：昆山市和丰路108号太平洋商业广场1233室</p>
          <p class="footer-contact-item"><span class="iconfont icon-dizhi"></span>邮箱：105498540@qq.com</p>
        </div>
        <div class="uk-width-2-3@m sub-info">
          <div class="uk-grid uk-child-width-1-3@m">
            <div class="input-item"><input type="text" placeholder="姓名"></div>
            <div class="input-item"><input type="text" placeholder="邮箱"></div>
            <div class="input-item"><input type="text" placeholder="电话"></div>
          </div>
          <div class="sub-desc"><textarea placeholder="内容"></textarea></div>
          <button class="uk-button uk-button-primary btn-sub">提交</button>
        </div>
      </div>
    </div>
  </div>

  <!--底部地图-->
  <div class="footer-map wow fadeInUp">
    <div class="uk-container">
      <a class="map-item" href="index.html">首页 </a>|
      <a class="map-item" href="solution.html"> 解决方案 </a>|
      <a class="map-item" href="examples.html"> 应用案例 </a>|
      <a class="map-item" href="orders.html"> 定制服务 </a>|
      <a class="map-item map-item-active" href="about.html"> 关于我们 </a>
    </div>
    <p class="copy-right">备案号:沪ICP备xxxxx号</p>
  </div>

  <!--返回顶部-->
  <span id="toTop" class="iconfont icon-fanhuidingbu to-top hide"></span>
</div>


<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script src="./libs/wow.min.js"></script>
<script src="./libs/uikit/js/uikit.min.js"></script>
<script src="./js/header.js"></script>
<script src="./libs/swiper/js/swiper.min.js"></script>
<script src="./datas/about.js"></script>
<script>
  $(document).ready(function () {
    $('.persons .swiper-slide').removeAttr("style");
  });
  var swiper = new Swiper('.swiper-container', {
    loop: true,
//    autoplay:true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>
</body>
</html>